<template>
   <section id="shdetail" v-loading='showLoding'> 
        <div style='overflow:auto;' class='scroll-auto'>
          <div class="top" id="topimgs">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for='(val,index) in imgArr' :key='index'>
                        <img :src="val"  width="100%" style="max-height:180px;">
                    </div>
                </div>
                <div class="swiper-scrollbar" style='height:2px;'></div>
            </div>
          </div>
           <div class="middle" style='padding:0 15px;'>
              <div style="padding-top:15px;font-size:1.6rem;font-weight:600;">
                <el-row style='height:25px;'>
                    <el-col :span='22' style='overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>
                        {{sellerInfo.fullName}}
                    </el-col>
                    <el-col :span='2' style='height:100%;' v-if='hideMap'>
                        <div @click='goMap' style='height:100%;width:100%;'>
                            <img src="../../../static/img/add.png" height="90%" width="90%" alt="map">
                        </div>
                    </el-col>
                </el-row>
              </div>
              <table border="0" width="100%" cellspacing="0" cellpadding="0">
                  <tr>
                      <td width="160">
                          <el-rate v-model="score" disabled  ></el-rate>
                      </td>
                  </tr>
              </table>
              <br>
              <div class='order-other-info'>
                  <p>
                      <span>订单数量&nbsp;&nbsp;&nbsp;</span>
                      <span>{{sellerInfo.orderNum}}</span>
                  </p>
                  <p>
                      <span>营业时间&nbsp;&nbsp;&nbsp;</span>
                      <span>{{sellerInfo.startTime}}—{{sellerInfo.endTime}}</span>
                  </p>
                  <p>
                      <span>商家地址&nbsp;&nbsp;&nbsp;</span>
                      <span>{{sellerInfo.address}}</span>
                  </p>
                   <p v-if='sellerInfo.bossMobile'>
                      <span>联系电话&nbsp;&nbsp;&nbsp;</span>
                      <a :href="'tel:'+sellerInfo.bossMobile"><span style='color:blue'>{{sellerInfo.bossMobile}}</span></a>
                  </p>
              </div>
          </div>
          <div style="background-color:white; margin-top:15px;" v-if='serviceModel'>
              <el-collapse style="padding-left:15px;padding-right:15px;">
                  <el-collapse-item :title="serviseInfo" name="1">
                      <div v-for="(val,index) in content" :key='index'>
                          {{val}}
                      </div>
                  </el-collapse-item>
              </el-collapse>
          </div>
          <div class="change-service-type" v-if='serviceModel'>
             <div 
                class="service-type1" 
                v-for="(val,index) in servise" 
                :key="index" 
                @click='price(val.standard.num,val.serviceType.num,val.standard.standardContent,val.servicePrice.discountPrice,index,val.serviceName)'>
                <input 
                  style='opacity: 0.8;'
                  class="radioService" 
                  type="radio" 
                  :ref='index+"ref"'
                  name="service"
                  @click.stop="price(val.standard.num,val.serviceType.num,val.standard.standardContent,val.servicePrice.discountPrice,index,val.serviceName)">
                <p style='position:relative;'>
                  <img id='beijinimg' :src="car"  width="55" height="50">
                  <span class='service-name'>{{val.serviceName}}</span>
                </p>
                <p style="text-overflow: ellipsis; overflow: hidden;white-space:nowrap;padding-right:4rem;">{{val.intro}}</p>
                <p>￥{{val.servicePrice.discountPrice}} 
                </p>
             </div>
          </div>
        </div>
        <div class="fukuan">
            <el-row>
                <el-col :span="14" style="background-color: #eee;">
                    <h3 style="margin:0px;">合计￥{{this.pricenow}}</h3>
                </el-col>
                <el-col :span="10"  style="background-color:#ec6517;"  >
                  <div style="width:100%;height:100%;"  @click.stop="submitorder"> <span style="color:white;">去结算</span> </div> 
                </el-col>
            </el-row>
        </div>
   </section>
</template>
<script>
import {URL_GENERATE_ORDER,URL_GET_SERVICE,URL_GET_SELLERINFO,AJAX,HREF,_layer} from "@/comm.js";
import suv from '../../../static/img/suv.png';
import car from '../../../static/img/car.png';
export default {
  data: function() {
    return ({ 
      score:5,
      standardNum:'',
      hideMap:true,
      serviseInfo:'服务细则',
      typeNum:'',
      suv:suv,
      serviceModel:true,
      servise:[],
      vs:{},
      imgArr:[],
      serviseContent:'',
      sellerInfo:{},
      showLoding:false,
      car:car,
      pricenow:0,
    });
  },
  beforeCreate: function() {
    $("title").text("商家信息");
  }, 
  computed:{
    content(){
      return this.serviseContent?this.serviseContent.split(','):[];
    }
  },
  created(){
    let This=this;
    let send={
      merchantNum:this.$route.query.num
    };
    //得到服务
    $.post(URL_GET_SERVICE,send,function(data){
      console.log('得到服务');
      console.log(data);
      if(data.retult&&data.data.length){
        This.servise=data.data;
      }else{
        This.serviceModel=false;
      }
    });
    //得到商家的详细信息
    $.post(URL_GET_SELLERINFO,{
      num:this.$route.query.num
    },function(data){
      if(data.retult){
        This.imgArr=JSON.parse(data.data.storefrontImgJson);
        This.sellerInfo=data.data;
        if(data.data.lat){
            This.vs={
                latitude: data.data.lat,
                longitude: data.data.lng,
                name: data.data.fullName,
                address: data.data.address,
                scale: 14,
                fail:function(){
                   _layer('地图连接失败');
                }
            };
        }else{
            This.hideMap=false;
        }
      }else{
        _layer('获取商家信息失败');
        setTimeout(function(){
          window.location.href=HREF+'/extension.html';
        },2000);
      }
    });
    //判断安卓还是IOS，安卓再拉接口来配置微信
    if(this.is_weixin()){
      this.map();
    }
  },
  mounted: function() {
    setTimeout(function(){
        let h = $(window).height();
        $('.scroll-auto').css({
          'height':(h-50)+'px',
          'overflow':'auto'
        });
        $('#beijinimg').attr('width','55');
        $("#shdetail").css("min-height", h + "px");
        $(".showimg").css("min-height", h + "px");
        $(".showimg").find("img").css("margin-top", (h - 300) / 2 + "px");
        new Swiper ('.swiper-container', {
            autoplay : {
              delay:3000,
              disableOnInteraction: false,
            },
            scrollbar: {
               el: '.swiper-scrollbar',
            },
        }); 
        $('.swiper-scrollbar .swiper-scrollbar-drag').css('background','rgba(0,0,0,0.3)');
    },500);
  },
  methods: {
    submitorder: function() {
      let This = this;
      if(!this.standardNum.trim()){
        _layer('请选择服务');
        return ;
      }
      let send={
        'standardNum':this.standardNum,
      };
      this.showLoding=true;
      $.post(URL_GENERATE_ORDER,send,function(data){
        This.showLoding=false;
        if(data.retult){
          This.$router.push({path:'/mdlist.html/pay',query:{num:data.data.num}});
        }else{
          _layer('订单创建失败');
        }
      })
    },
    price(standardNum,typeNum,content,price,index,name){
        $(this.$refs[index+'ref']).prop('checked',true);
        this.serviseInfo=name+'细则';
        this.pricenow=price;
        this.standardNum=standardNum;
        this.typeNum=typeNum;
        this.serviseContent=content;
    },
    map(){
      $.ajax({
          type : "get",  //提交方式  
          url : "/wx/jsapi",//路径  
          data:{url:window.location.href},
          success : function(result) {
              //返回数据根据结果进行相应的处理  
              if ( result.retult ) {  
                     wx.config({
                        appId:result.data.appId,
                        nonceStr:result.data.nonceStr,
                        signature:result.data.signature,
                        timestamp:result.data.timestamp,
                        jsApiList: [
                          'getLocation',
                          'openLocation'
                        ]
                      });
              } else {  
                  _layer('地图初始化失败');
              }  
          }  
      }); 
    },
    goMap(){
        wx.openLocation(this.vs);
    },
    //判断是安卓还是IOS
    is_weixin() {
        var u = navigator.userAgent, app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isAndroid) {
           //这个是安卓操作系统
           return true;
        }
        if (isIOS) {
    　　　　//这个是ios操作系统
           return false;
        }
    }
  }
};
</script>
<style scoped>
#shdetail > .fukuan {
  text-align: center;
  width: 100%;
  background-color: white;
  line-height: 50px;
  height: 50px;
  position: fixed;
  left: 0px;
  bottom: 0px;
}
#shdetail > .fukuan a {
  text-decoration: none;
}
#shdetail > .top {
  width: 100%;
  max-height: 250px;
}

#shdetail > .middle {
  padding-left: 15px;
  padding-right: 15px;
  background-color: white;
}
#shdetail > .middle .pllist .el-rate__icon {
  margin-right: 0px;
  font-size: 14px;
}
#shdetail > .showimg {
  position: fixed;
  left: 0px;
  top: 0px;
  text-align: center;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7); 
}
#shdetail > .showimg img{
  height:300px; border-radius: 10px;
}
.change-service-type{
  margin-top: 1.5rem;
  background: #fff;
}
.service-name{
  position: absolute;
  top: 20px;
  left: 85px;
  font-size: 13px;
}
.change-service-type div{
  position: relative;
  height: 85px;
  padding: 0 0 1rem 0;
}
.service-type1{
  border-bottom: 1px solid #ddd;
}
.change-service-type input{
  position: absolute;
  right: 15px;
  top:35px;
  width: 1.8rem;
  height: 30px;
  opacity: 0.3;
}
.change-service-type div p:first-of-type{
  height:50px;
  margin:0;
  padding-left:1rem; 
  font-size:1.5rem;
  letter-spacing: 1.5px;
  font-weight: 900;
}
.change-service-type div p:nth-of-type(2){
  margin: -5px 0;
  padding-left: 1rem;
  color:#a3a3a3;
}
.change-service-type div p:nth-of-type(3){
  margin-top: 12px;
  padding-left: 1rem;
  font-size:1.8rem;
}
.change-service-type div p:nth-of-type(3) span{
  text-decoration:line-through;
  font-size:1.5rem;
  color:#a3a3a3;
}

.order-other-info p{
  padding: 3px 0;
  color:#999;
}
</style>
